<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI sortable()实现拖动排序</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery.js"></script> 
        <script type="text/javascript" src="jquery-ui.min.js"></script> 
    </head>
    <style>
    
  ul{
  list-style-type: decimal;
  }

  li{ 
	width:140px; 
    heigth:51px; 
    text-align:center;  
    line-height:51px;
    background: red;
    margin: 4px; 

  } 
 
    
    </style>
    <body>
       <script>
        $(function() {
          $( ".sortable" ).sortable({
	          cursor: "move",
	          items :"li",                        //只是li可以拖动
	          opacity: 0.6,                       //拖动时，透明度为0.6
	          revert: true,                       //释放时，增加动画
	          update : function(event, ui){       //更新排序之后
	               //alert($(this).sortable("toArray"));
	          }
          });
       });
      </script>
      <ul class="sortable">
        <li class="ui-state-default"  id="1">第1项</li>
        <li class="ui-state-default"  id="2" >第2项</li>
        <li class="ui-state-default"  id="3">第3项</li>
      </ul>
    </body>
</html>